<template>
	<view class="news-card">
		<!-- 单图模式：图片靠左 + 标题在右侧自适应 -->
		<view class="single-content" v-if="mode==2">
			<image :src="showImage" class="single-image" @error="handleImageException()"></image>
			<text class="news-title single-title">{{ title }}</text>
		</view>

		<!-- 多图模式：保持原有水平排列 -->
		<view v-else-if="mode==3">
			<text class="news-title" style="color:#999">{{ title }}</text>
			<view class="multi-image-box">
				<view class="multi-image-item" v-for="(item,index) in images" :key="index">
					<image :src="item" @error="handleImageError(index)" class="multi-image"></image>
				</view>
			</view>
		</view>

		<!-- 无图模式：仅标题 -->
		<text class="news-title" v-else>{{ title }}</text>

		<!-- 元数据区域：统一在图文下方 -->
		<view class="news-meta">
			<view class="tags">
				<text class="top-tag" v-if="isTop">置顶</text>
				<text class="ad-tag" v-if="mode==3">广告</text>
			</view>
			<text class="news-source">{{ source }}</text>
			<text class="news-comment" v-if="mode!=3">{{ comment }}评</text>
			<text class="news-time">{{ time }}</text>
		</view>

		<slot name="tips" v-if="showSearch"></slot>
	</view>
</template>

<script>
	export default {
		name: 'CustomTextView',
		data() {
			return {
				defaultPic: "/static/default-image.png",
				failPic: "/static/lose-image.png",
				imageError: false // 仅用于单图模式
			};
		},
		computed: {
			showImage() {
				// 单图模式图片路径处理
				if (this.mode === 2) {
					return this.images[0] && !this.imageError ?
						this.images[0] :
						(this.imageError ? this.failPic : this.defaultPic);
				}
				return '';
			}
		},
		props: {
			title: {
				type: String,
				required: true
			},
			source: {
				type: String,
				required: true
			},
			comment: {
				type: Number,
				required: true
			},
			time: {
				type: String,
				required: true
			},
			isTop: {
				type: Boolean,
				default: false
			},
			showSearch: {
				type: Boolean,
				default: false
			},
			mode: {
				type: Number,
				default: 1,
				required: true
			},
			images: {
				type: Array,
				default: () => []
			}
		},
		methods: {
			handleImageException() {
				if (this.mode === 2) this.imageError = true;
			},
			handleImageError(index) {
				if (this.mode === 3) this.$set(this.images, index, this.failPic);
			}
		},
	}
</script>

<style scoped>
	/* 卡片容器 */
	.news-card {
		padding: 16rpx 16rpx;
		border-bottom: 1px solid #eee;
		background-color: #fff;
	}

	/* 标题基础样式 */
	.news-title {
		font-size: 15px;
		font-weight: 500;
		color: #333;
		line-height: 1.4;
	}

	/* 单图模式：图文同一行布局 */
	.single-content {
		display: flex;
		/* 启用flex，图片和标题在同一行 */
		align-items: flex-start;
		/* 顶部对齐，避免标题因换行下沉 */
		gap: 12rpx;
		/* 图片与标题的间距 */
		margin-bottom: 12rpx;
		/* 与下方元数据的间距 */
	}

	/* 单图样式 */
	.single-image {
		width: 200rpx;
		/* 固定图片宽度 */
		height: 140rpx;
		/* 固定高度，保持16:9比例 */
		border-radius: 8rpx;
		object-fit: cover;
		/* 防止变形 */
		flex-shrink: 0;
		/* 图片不收缩，确保宽度固定 */
	}

	/* 单图模式的标题：自适应填充剩余空间 */
	.single-title {
		flex: 1;
		/* 占据图片右侧全部剩余空间 */
		word-wrap: break-word;
		/* 文字过长自动换行 */
		white-space: normal;
		/* 允许换行 */
		min-height: 140rpx;
		/* 与图片高度一致，确保元数据对齐 */
		display: flex;
		align-items: center;
		/* 标题文字在图片高度范围内垂直居中 */
	}

	/* 多图模式容器 */
	.multi-image-box {
		display: flex;
		gap: 8rpx;
		width: 100%;
		height: 180rpx;
		margin: 8rpx 0 12rpx;
		/* 与标题和元数据的间距 */
	}

	.multi-image-item {
		flex: 1;
		height: 100%;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.multi-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* 元数据区域：统一在图文下方 */
	.news-meta {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		font-size: 12px;
		color: #999;
		line-height: 1;
		padding-top: 8rpx;
		/* 与上方图文区的分隔 */
	}

	/* 标签容器 */
	.tags {
		display: flex;
		gap: 8rpx;
		margin-right: 12rpx;
	}

	.top-tag {
		background-color: #f53f3f;
		color: white;
		padding: 2rpx 6rpx;
		border-radius: 4rpx;
		font-size: 11px;
	}

	.ad-tag {
		background-color: #ff7d00;
		color: white;
		padding: 2rpx 6rpx;
		border-radius: 4rpx;
		font-size: 11px;
	}

	.news-source,
	.news-comment {
		margin-right: 16rpx;
	}

	.news-time {
		margin-left: auto;
		color: #bbb;
	}

	/* 响应式调整 */
	@media (max-width: 375px) {
		.single-image {
			width: 160rpx;
			height: 110rpx;
		}

		.single-title {
			min-height: 110rpx;
			font-size: 14px;
		}

		.multi-image-box {
			height: 150rpx;
		}
	}
</style>